import React, { Component } from "react";
import { Upload, Button, Icon } from "antd";
import { inject, observer } from "mobx-react";
import VideoPlayer from "../components/common/VideoPlayer";
import { TESTCARPICTURE } from "../service/api/FaceRecognitionApi";

const introduces = [
  {
    icon:
      "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/smallIcons/VehicleLicensePlateRecognition/1.png",
    title: "识别对象广泛",
    desc:
      "可以识别黄、蓝、黑、白底色常见车牌，以及双层车牌、个性车牌、八位新能源车牌等较复杂车牌。"
  },
  {
    icon:
      "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/smallIcons/VehicleLicensePlateRecognition/2.png",
    title: "抗干扰能力强",
    desc:
      "算法鲁棒性好，在关键部分不被遮挡情况下，可以实现车牌破损、扭曲、侧视角、反光、低光照等多种恶劣环境下的识别。"
  },
  {
    icon:
      "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/smallIcons/VehicleLicensePlateRecognition/3.png",
    title: "算法高效",
    desc:
      "经过深度优化的算法可以实现车牌高速检出，可支持停车场等频繁调用场景的时限性和吞吐量要求。"
  },
  {
    icon:
      "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/smallIcons/VehicleLicensePlateRecognition/4.png",
    title: "部署形态灵活",
    desc:
      "可以根据业务需要选择不同规格的部署方式，以灵活的部署成本支撑多元化和增长型的业务需求。"
  }
];

const videoJsOptions = {
  controls: true,
  sources: [
    {
      loop: true,
      src: "https://vjs.zencdn.net/v/oceans.mp4",
      type: "video/mp4"
    }
  ]
};

const checkImgList = [
  "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/VehicleLicensePlateRecognition/demoPicture1.png",
  "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/VehicleLicensePlateRecognition/demoPicture2.png",
  "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/VehicleLicensePlateRecognition/demoPicture3.png",
  "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/VehicleLicensePlateRecognition/demoPicture4.png"
];

const str = "人脸识别";
@inject("FaceRecognitionStore")
@observer
export default class componentName extends Component {
  state = {
    carTestResult: {},
    carTestSArr: [],
    checkIndex: 0,
    previewImg: checkImgList[0],
    checkState: false,
    changeImg: undefined
  };
  Framed = (id, data, lineWidthA, strokeStyle, lineWidthB, lineWidthC) => {
    // this.calculateRatio()//先计算比率
    //导出画框函数
    var c = document.getElementById(id);
    var ctx = c.getContext("2d");
    data.map((item, key) => {
      //canvas绘图
      ctx.beginPath();
      ctx.lineWidth = lineWidthA;
      ctx.strokeStyle = strokeStyle;
      ctx.rect(item.l, item.t, item.w, item.h);
      ctx.stroke();
      ctx.beginPath();
      ctx.lineWidth = lineWidthB;
      //   ctx.moveTo(item.l, item.t + lineWidthB / 2);
      //   ctx.lineTo(item.l + item.w / 4, item.t + lineWidthB / 2);

      //   ctx.moveTo(item.l + item.w, item.t + lineWidthB / 2);
      //   ctx.lineTo(item.l + item.w - item.w / 4, item.t + lineWidthB / 2);

      //   ctx.moveTo(item.l, item.t + item.h - lineWidthB / 2);
      //   ctx.lineTo(item.l + item.w / 4, item.t + item.h - lineWidthB / 2);

      //   ctx.moveTo(item.l + item.w, item.t + item.h - lineWidthB / 2);
      //   ctx.lineTo(item.l + item.w - item.w / 4, item.t + item.h - lineWidthB / 2);

      //   ctx.moveTo(item.l + lineWidthB / 2, item.t);
      //   ctx.lineTo(item.l + lineWidthB / 2, item.t + item.h / 4);

      //   ctx.moveTo(item.l + lineWidthB / 2, item.t + item.h);
      //   ctx.lineTo(item.l + lineWidthB / 2, item.t + item.h - item.h / 4);

      //   ctx.moveTo(item.l + item.w - lineWidthB / 2, item.t);
      //   ctx.lineTo(item.l + item.w - lineWidthB / 2, item.t + item.h / 4);

      //   ctx.moveTo(item.l + item.w - lineWidthB / 2, item.t + item.h);
      //   ctx.lineTo(item.l + item.w - lineWidthB / 2, item.t + item.h - item.h / 4);

      ctx.stroke();
      //绘制完四边框条条
      //在图片框上面弄一个说明 detect
      ctx.beginPath();
      ctx.lineWidth = lineWidthC;
      ctx.fillStyle = strokeStyle;
      ctx.fillRect(item.l, item.t - 20, 70, 20);
      ctx.stroke();
      //说明结束
      //在图片框上面弄一个说明 type
      ctx.beginPath();
      ctx.lineWidth = lineWidthC;
      ctx.fillStyle = strokeStyle;
      ctx.fillRect(item.l, item.t - 40, item.type_width, 20);
      ctx.stroke();
      //说明结束
      //写字    detect文字
      var grad = ctx.createLinearGradient(0, 0, c.width, 0);
      ctx.font = "bold 14px arial";
      ctx.fillStyle = "black";
      ctx.strokeStyle = grad;
      ctx.fillText(item.detect, item.l, item.t - 5, 100);
      ctx.strokeText(item.detect, 40, 80, 100);
      //写字
      //写字    detect文字
      var grad = ctx.createLinearGradient(0, 0, c.width, 0);
      ctx.font = "bold 14px arial";
      ctx.fillStyle = "black";
      ctx.strokeStyle = grad;
      ctx.fillText(item.type, item.l, item.t - 5 - 20, 100);
      ctx.strokeText(item.type, 40, 80, 100);
      //写字
    });
  };
  renderCheckImgList = () => {
    const { changeImg } = this;
    const { checkIndex } = this.state;
    //四方格
    return checkImgList.map((item, key) => {
      let className = "yl-ai-body-text-simple-img";
      if (checkIndex == key) {
        className += " img-change";
      }
      return (
        <div
          //   onClick={() => {
          //     changeImg(key);
          //   }}
          className={className}
          key={"img_" + key}
          style={{ textAlign: "start", float: "left",marginLeft:"10px",marginTop:"10px" }}
        >
          <img
            style={{ height: "236px", width: "487px", }}
            title=""
            alt=""
            src={item}
          />
        </div>
      );
    });
  };
  componentDidMount() {
    window.scrollTo(0, 0);
  }
  clearRect = () => {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, 1004, 502);
  };
  changeImg = i => {
    this.setState(() => ({
      //点击之前默认清空所有状态
      formatFalse: false,
      tooBig: false
    }));
    this.clearRect();
    this.setState({
      carTestResult: {},
      carTestSArr: [],
      checkIndex: i,
      checkState: false,
      previewImg: checkImgList[i]
    });
  };
  checkQuery = () => {
    const { previewImg, changeImg } = this.state;
    this.setState({
      checkState: true
    });
    const formData = new FormData();
    formData.append("src", previewImg);
    TESTCARPICTURE(formData).then(rs => {
      setTimeout(() => {
        this.setState({
          checkState: undefined,
          // previewImg: 'data:image/jpg;base64,'+rs.data.b64 ,
          carTestResult: rs.data.data,
          carTestSArr: rs.data.data
        });
        var data = rs.data.data;
        this.Framed("myCanvas", data, "4", "#00B9EF", "4", "2");
      }, 500);
    });
  };
  render() {
    const _that = this;
    const { checkQuery } = this;
    const { previewImg, checkState, carTestResult, carTestSArr } = this.state;
    const uploadProps = {
      beforeUpload(e) {
        const file = e;
        var fr = new FileReader();

        fr.onload = () => {
          const fileType = "image/pngimage/jpgimage/jpeg";
          if (fileType.indexOf(file.type) < 0) {
            return false;
          } else if (file.size > 1024 * 1024) {
            return false;
          } else {
            var dataURL = fr.result; // picture_base64
            _that.setState({
              checkIndex: -1,
              checkState: false,
              previewImg: dataURL
            });
          }
        };
        fr.readAsDataURL(file);
        return false;
      }
    };
    return (
      <div className="yl-ai-body-container">
        <div className="yl-ai-body-banner yl-ai-vehicleLicensePlateRecognition">
          <div className="yl-ai-banner-opicity"></div>
          <div className="yl-ai-banner-txt">
            <div className="yl-ai-banner-title">机动车车牌识别</div>
            <div className="yl-ai-banner-desc">
              可识别5种不同颜色的车牌，4种双层车牌，9种单层车牌，以及故意遮挡的号牌。
            </div>
          </div>
        </div>

        <div className="yl-ai-body-container">
          <div className="yl-ai-body-container-panel">
            <div className="yl-ai-body-title">产品亮点</div>
            <div className="yl-ai-body-max-width">
              <div className="yl-ai-body-introduces">
                {introduces.map((item, key) => {
                  return (
                    <div className="yl-ai-body-introduce">
                      <div className="yl-ai-body-introduce-icon">
                        <img src={item.icon} />
                      </div>
                      <div className="yl-ai-body-introduce-text">
                        <div className="yl-ai-body-introduce-title">
                          {item.title}
                        </div>
                        <div className="yl-ai-body-introduce-desc">
                          {item.desc}
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>

          <div className="yl-ai-body-container-panel">
            <div className="yl-ai-body-title ">功能演示</div>

            <div
              className="yl-ai-body-max-width "
            >
              <div
                className="yl-ai-body-test-simple"
                style={{ display: "block" }}
              >
                <div
                className="yl-ai-body-test-simple_content"
     
                >
                  {this.renderCheckImgList()}
                </div>

              </div>
            </div>
          </div>

          <div className="yl-ai-body-container-panel yl-ai-body-app-scene">
            <div className="yl-ai-body-title">应用场景</div>
            <div className="yl-ai-body-max-width ">
              <div className="yl-ai-humanRecognitionTracking-scene">
                <div className="yl-ai-humanRecognitionTracking-scene-desc">
                  <div className="yl-ai-humanRecognitionTracking-scene-title">
                    公共管理和园区治理
                  </div>
                  <div className="yl-ai-humanRecognitionTracking-scene-desc">
                    广泛的应用于交通管理、园区管理、停车场管理等业务场景，实现非法车辆识别处理，违停和闯入检测，停车管理等功能。
                  </div>
                </div>

                <div className="yl-ai-humanRecognitionTracking-scene-img">
                  <img
                    className="scene-img"
                    src="https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/VehicleLicensePlateRecognition/carNoExample.png"
                    title=""
                    alt=""
                  />
                  <div className="base-bg1">
                    <div></div>
                  </div>
                  <div className="base-bg2"></div>
                </div>
              </div>
            </div>
          </div>

          <div className="yl-ai-body-container-panel yl-ai-example-panel">
            <div className="yl-ai-body-title">云粒智慧应用案例</div>
            <div className="yl-ai-body-max-width">
              <div className="yl-ai-examples">
                <div className="yl-ai-example">
                  <div className="yl-ai-example-title title-h2">
                    云防·智慧园区管理平台
                  </div>

                  <div className="yl-ai-example-double-desc"></div>
                  <div className="yl-ai-example-image">
                    <img
                      src="https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/MotorVehicleRecognition/exampleImg1.png"
                      alt=""
                      title=""
                    />
                  </div>
                  <div className="yl-ai-examples-copyWriting">
                    云防智慧园区管理平台是云粒自主研发的基于人脸识别、车辆识别等视频识别技术的园区综合管理平台，平台由态势感知、异常预警、高级研判、智能检索、智能终端5部分组成，广泛应用于各类园区的综合管控。
                  </div>
                </div>

                <div className="yl-ai-example">
                  <div className="yl-ai-example-title title-h2">
                    云粒城市综治大脑违章停车治理场景
                  </div>

                  <div className="yl-ai-example-double-desc"></div>
                  <div className="yl-ai-example-image">
                    <img
                      src="https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/VehicleLicensePlateRecognition/exampleImg.png"
                      alt=""
                      title=""
                    />
                  </div>
                  <div className="yl-ai-examples-copyWriting">
                    违章停车治理是城市治理中的突出问题，以前完全依靠人工巡视成本高、效果差，云粒联合阿里云达摩院共同研发的违章停车治理系统，充分利用遍布各区域的摄像头，结合违停区域图层技术自动圈定可用摄像头，通过车辆识别、车牌识别技术自动发现违章停车行为，并能够根据法律法规要求进行非现场执法和现场执法，解决城市治理中违章停车监管的难题。
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
